<template>
    <el-container>
        <el-header class="header-search">
            <search-header
                :search-form="searchForm"
                :search-items="searchItems"
                :expand="expand"
                :fc-table-ref="fcTableRef"
                @expand="expand = $event"
            />
        </el-header>
        <el-main class="nopadding">
            <fc-table ref="fcTableRef" rowKey="id" :requestApi="getLoginLogListApi" :columns="columns">
                <template #realname="scope">
                    <div>{{ scope.row.user?.realname ?? '---' }}</div>
                </template>
                <template #email="scope">
                    <div>{{ scope.row.user?.email ?? '---' }}</div>
                </template>
                <template #user_agent="scope">
                    <el-tooltip class="ellipsis-tooltip" effect="dark" :content="scope.row.user_agent"
                                placement="top">
                        <div class="ellipsis-cell">{{ scope.row.user_agent }}</div>
                    </el-tooltip>
                </template>
                <template #description="scope">
                    <div v-if="scope.row.description == null">---</div>
                    <div v-else>{{ scope.row.description }}</div>
                </template>
                <template #state="scope">
                    <el-tag effect="light" :type="scope.row.state === 'success' ? 'primary' : 'danger'">
                        {{ filter.state!.find(item => item.key === scope.row.state)?.label || scope.row.state }}
                    </el-tag>
                </template>
            </fc-table>
        </el-main>
    </el-container>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref, computed} from "vue";
import {ColumnProps, FcTableInstance} from "@/components/fcTable/model"
import {getLoginLogFilterApi, getLoginLogListApi} from "@/api/modules/setting.ts";
import {FilterModel} from "@/models/filterModel.ts";
import SearchHeader from "@/components/lcSearch/header.vue";
import SearchInput from '@/components/lcSearch/input.vue'
import SearchSelect from '@/components/lcSearch/select.vue'
import SearchDateRange from '@/components/lcSearch/dateRange.vue'

const fcTableRef = ref<FcTableInstance | null>(null);
const expand = ref(false);
// 搜索表单
const searchForm = reactive<Record<string, any>>({
    email: null,
    realname: null,
    state: null,
    created_at: null,
})
// 搜索参数
const searchItems = computed(() => [
    {component: SearchInput, model: 'realname', props: {label: '姓名', placeholder: '请输入姓名'}},
    {component: SearchInput, model: 'email', props: {label: '邮箱', placeholder: '请输入邮箱'}},
    {
        component: SearchSelect,
        model: 'state',
        props: {label: '状态', placeholder: '请选择状态', options: filter.state}
    },
    {component: SearchDateRange, model: 'created_at', props: {label: '登录时间'}},
]);

// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
    {prop: "id", label: "序号", width: 80},
    {prop: "realname", label: "姓名", width: 120},
    {prop: "email", label: "邮箱", width: 200},
    {prop: "ip", label: "IP", width: 180},
    {prop: "user_agent", label: "客户端"},
    {prop: "description", label: "描述", width: 200},
    {prop: "state", label: "状态", width: 100},
    {prop: "created_at", label: "登录时间", width: 200},
]);
// 过滤器
const filter = reactive<FilterModel>({
    state: []
});
const loadFilters = async () => {
    const filterData = await getLoginLogFilterApi();
    filter.state = Object.entries(filterData.data.data.state || {}).map(
        ([key, label]) => ({key, label})
    );
};
onMounted(() => {
    loadFilters();
});
</script>
<style lang="scss" scoped>
.ellipsis-cell {
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
